import { Color, Matrix4, Vector3, Quaternion } from 'https://unpkg.com/three/build/three.module.js';
import { initShaders, ScaleLinear, imgPromise } from '../jsm/Utils.js';
import lib from '../jsm/ThreeLib.js';
import Poly from '../jsm/Poly3.js'
import Sky from '../jsm/Sky.js'
import ShapeGeo from '../jsm/ShapeGeo.js';
import ImageJump from '../jsm/ImageJump.js'

window.onload = function () {

    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const gl = canvas.getContext("webgl");
    //开启颜色合成,才会有透明度的感觉
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    //开始背景遮挡
    gl.enable(gl.DEPTH_TEST);

    //初始化着色器
    initShaders(gl,
        document.querySelector("#vertexShader").innerText,
        document.querySelector("#fragmentShader2").innerText);
    lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);


    let max = 1;
    let allArr = [
        -0.5, -0.8, 10, 0, 0,
        -0.5, 0.8, 10, 0, max,
        0.5, -0.8, 10, max, 0,
        0.5, 0.8, 10, max, max,
    ];
    // let allArr = [
    //     -0.5, -0.8, 10, 0, max,
    //     -0.5, 0.8, 10, max, max,
    //     0.5, -0.8, 10, 0, 0,
    //     0.5, 0.8, 10, max, 0,
    // ];

    let mm4 = new Matrix4();

    const imageJumpData = { set: 0.0, };

    let u_Mm4 = gl.getUniformLocation(gl.program, 'u_ModelMatrix')
    gl.uniformMatrix4fv(u_Mm4, false, mm4.elements)

    let poly = new Poly({
        gl: gl,
        arr: allArr,
        list: [
            { name: 'a_Position', size: 2, beginIndex: 0 },
            { name: 'a_PointSize', size: 1, beginIndex: 2 },
            { name: 'a_Pin', size: 2, beginIndex: 3 },
        ],
        uniforms: {
            u_Set: {
                type: 'uniform1f',
                value: imageJumpData.set,
            }
        }
    });


    poly.draw(["TRIANGLE_STRIP"]);


    const image01 = new Image();
    image01.src = '../Images/Image010.png';
    const image02 = new Image();
    image02.src = '../Images/Image01.png';
    const image03 = new Image();
    image03.src = '../Images/Image05.png';

    const imageArr = [image01, image02, image03];


    Promise.all([
        imgPromise(image01),
        imgPromise(image02),
        imgPromise(image03),
    ]).then(() => {


        var imageJump = new ImageJump({
            data: imageJumpData,
            images: imageArr,
            onEnd: updateImage
        });
        imageJump.start(1000);


        (function ani() {
            imageJump.update();
            poly.uniforms.u_Set.value = imageJumpData.set;
            poly.updateUniform();
            poly.draw(["TRIANGLE_STRIP"]);
            requestAnimationFrame(ani);
        })();

        // poly.texture = {
        //     'u_Sampler1': {
        //         image: imageArr[0],
        //         WRAP_W: gl.CLAMP_TO_EDGE,
        //         WRAP_H: gl.CLAMP_TO_EDGE,
        //     },
        //     'u_Sampler2': {
        //         image: imageArr[1],
        //         WRAP_W: gl.CLAMP_TO_EDGE,
        //         WRAP_H: gl.CLAMP_TO_EDGE,
        //     }
        // };
        // poly.updateTexture();
        // poly.draw(["TRIANGLE_STRIP"])

        // let s_Set = gl.getUniformLocation(gl.program, 'u_Set');
        // let index = 0.0;
        // let index01 = true;
        // var eachNum = 0.005;
        // (function ani() {
        //     index += eachNum;

        //     if (index01) {
        //         if (index >= 2.0) {
        //             index01 = !index01;
        //             eachNum = -eachNum;
        //         }
        //     } else {
        //         if (index <= -1.0) {
        //             index01 = !index01;
        //             eachNum = -eachNum;
        //         }
        //     }

        //     console.log(eachNum)

        //     if (index <= 1.0 && index >= 0.0) {
        //         gl.uniform1f(s_Set, index);
        //     }
        //     poly.draw(["TRIANGLE_STRIP"]);
        //     requestAnimationFrame(ani);
        // })();
    });



    //修改图片
    function updateImage(images) {
        poly.texture = {
            'u_Sampler1': {
                image: images[0],
                WRAP_W: gl.CLAMP_TO_EDGE,
                WRAP_H: gl.CLAMP_TO_EDGE,
            },
            'u_Sampler2': {
                image: images[1],
                WRAP_W: gl.CLAMP_TO_EDGE,
                WRAP_H: gl.CLAMP_TO_EDGE,
            }
        };
        poly.updateTexture();
    }





};
